<!-- 累计趋势 -->
<template>
  <div ref="basicTrendChart" style="width: 100%; height: 100%" />
</template>
<script>
import * as echarts from 'echarts'
let chart = null
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    data: Object
  },
  methods: {
    initChart() {
      if (null != chart && undefined != chart) {
        chart.dispose()
      }
      chart = this.$echarts.init(this.$refs.basicTrendChart)
      this.setOptions()
    },
    setOptions() {
      let option = {
        title: {
          text: this.title,
          fontWeight: 'normal',
          fontSize: 16,
          color: '#F1F1F3',
          left: '6%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          left: 'center',
          padding: [10, 0, 0, 0],
          data: ['确诊', '治愈', '死亡'],
          //图例滚动
          type: 'scroll',
          //图例文字样式
          textStyle: {
            color: 'rgba(36, 173, 254, 1)',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: this.data.dateList
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位（例）',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            axisLabel: {
              margin: 10,
              fontSize: 14
            },
            splitLine: {
              lineStyle: {
                width: 0,
                color: 'rgba(128, 128, 128, 0.5)'
              }
            }
          }
        ],
        series: [
          {
            name: '确诊',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              width: 3
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(205,52,42, 0.5)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(235,235,21, 0)'
                  }
                ],
                false
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(205,52,42,1)'
                },
                {
                  offset: 1,
                  color: 'rgba(235,235,21,1)'
                }
              ])
            },
            emphasis: {
              color: 'rgb(99,250,235)',
              borderColor: 'rgba(99,250,235,0.2)',
              extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
              borderWidth: 2
            },
            data: this.data.connumList
          },
          {
            name: '治愈',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              width: 3
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: 'rgba(16,97,204, 0.3)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(17,235,210, 0)'
                  }
                ],
                false
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(16,97,204,1)'
                },
                {
                  offset: 1,
                  color: 'rgba(17,235,210,1)'
                }
              ])
            },
            emphasis: {
              color: 'rgb(0,196,132)',
              borderColor: 'rgba(0,196,132,0.2)',
              extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
              borderWidth: 2
            },
            data: this.data.curenumList
          },

          {
            name: '死亡',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              width: 3
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(119,68,255, 0.5)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(23,32,79, 0)'
                  }
                ],
                false
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(2,163,254,1)'
                },
                {
                  offset: 1,
                  color: 'rgba(119,61,242,1)'
                }
              ])
            },
            emphasis: {
              color: 'rgb(99,250,235)',
              borderColor: 'rgba(99,250,235,0.2)',
              extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
              borderWidth: 2
            },
            data: this.data.deathnumList
          }
        ]
      }
      chart.setOption(option)
    }
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        if (oldValue != newValue) {
          this.setOptions()
        }
      },
      deep: true
    }
  }
}
</script>